<template>
    <div id="app">
        <dv-full-screen-container>
            <dv-border-box-11 title="神秘客大屏实时分析" ref="refDvBorder">
                <dv-decoration-5  :dur="2" :style="{height:screenOrWh.px2vh(40)}"/>
                <div style="display: flex;align-items: center;">
                    <dv-decoration-11 :style="{width:screenOrWh.px2vw(220),height:screenOrWh.px2vh(80),
                    marginRight:screenOrWh.px2vw(20)}"
                                      class="brand-qici-sel">
                        <el-select v-model="brandQi" placeholder="请选择期次"
                                   style="width: 75%" @change="changeQiCi">
                            <el-option v-for="item in brandQiSet" :key="item.id" :label="item.periodName" :value="item.id"></el-option>
                        </el-select>
                    </dv-decoration-11>
                    <dv-decoration-11 :style="{width:screenOrWh.px2vw(220),height:screenOrWh.px2vh(80)}"
                                      class="brand-qici-sel">
                        <el-select v-model="proDaQu" placeholder="请选择层级"
                                   style="width: 75%" @change="changFen">
                            <el-option v-for="item in quyuSet" :key="item.id" :label="item.outletsName" :value="item.id"></el-option>
                        </el-select>
                    </dv-decoration-11>
                </div>
<!--                内容体实际宽高-->
                <div style="display: flex;width: 100%;" :style="{height:screenOrWh.px2vh(1080 - 180)}">
                    <div class="content-left">
                        <div class="content" style="width: 100%;height: 100%">
                            <dv-border-box-1>
                                <div style="display: flex;flex-direction: column;width: 100%;height: 100%"
                                class="left-main-padd-none">
                                    <dv-border-box-8 :dur="5" :style="{marginBottom:screenOrWh.px2vh(10)}">
                                        <mendianshuliang ref="refMendianshuliang"></mendianshuliang>
                                    </dv-border-box-8>
                                    <dv-border-box-8 :dur="5" :style="{marginBottom:screenOrWh.px2vh(10)}">
                                        <shangqibendizhuzhuang ref="benqishangqi"></shangqibendizhuzhuang>
                                    </dv-border-box-8>
                                    <dv-border-box-8 :dur="5">
                                        <fengongsizhe ref="refFengongsi"></fengongsizhe>
                                    </dv-border-box-8>
                                </div>
                            </dv-border-box-1>
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: column;flex: 1;height: 100%">
                        <div class="main-body-content">
                            <div class="content-center">
                                <dv-border-box-6>
                                    <mapcenter ref="refMapCenter"></mapcenter>
                                </dv-border-box-6>
                            </div>
                            <div class="content-right">
                                <dv-border-box-1>
                                    <div class="left-main-padd-none" style="width: 100%;height: 100%">
                                        <dv-decoration-6 style="width:100%;"
                                        :style="{height:screenOrWh.px2vh(20),marginTop:screenOrWh.px2vh(-10),
                                        marginBottom:screenOrWh.px2vh(10)}"/>
                                        <dv-border-box-8 :dur="8">
                                            <cengjiquyupaiming ref="refCengjiquyupaiming"></cengjiquyupaiming>
                                        </dv-border-box-8>
                                    </div>
                                </dv-border-box-1>
                            </div>
                        </div>
                        <div class="bottom-content left-main-padd-none"
                        :style="{height:screenOrWh.px2vh(300)}">
                            <dv-border-box-9 :style="{padding:screenOrWh.px2vw(10)}"
                            style="box-sizing: border-box">
                                <bottomshifen ref="refBottomshifen"></bottomshifen>
                            </dv-border-box-9>
                        </div>
                    </div>
                </div>

            </dv-border-box-11>
        </dv-full-screen-container>
    </div>
</template>

<script>
import screenOrWh from "@/utils/screenOrWh";
import mendianshuliang from "@/components/mendianshuliang.vue";
import Shangqibendizhuzhuang from "@/components/shangqibendizhuzhuang.vue";
import Fengongsizhe from "@/components/fengongsizhe.vue";
import Mapcenter from "@/components/mapcenter.vue";
import Cengjiquyupaiming from "@/components/cengjiquyupaiming.vue";
import Bottomshifen from "@/components/bottomshifen.vue";
import instance from "@/api";
export default {
    name: 'App',
    components:{
        Bottomshifen,
        Cengjiquyupaiming,
        Mapcenter,
        Fengongsizhe,
        Shangqibendizhuzhuang,
        mendianshuliang
    },
    mounted() {
        window.addEventListener('resize', () => {
            // this.$nextTick(() => {
            //     this.$refs.refDvBorder.initWH()
            // })
        })
        const id = new URLSearchParams(window.location.search).get('id');
        if(id){
            sessionStorage.setItem('projectId',id)
            instance.get('/base/period/front/getFrontPeriodList',{
                params:{
                    projectId:id
                }
            }).then(res => {
                if(res.data.code == 200){
                    this.brandQiSet = res.data.data
                    this.brandQi = res.data.data[0].id
                    this.$refs.refMendianshuliang.getMenDianNum(this.brandQi)
                    this.$refs.benqishangqi.getMenDianNum(this.brandQi)
                    this.$refs.refMapCenter.getMenDianNum(this.brandQi)
                    this.$refs.refCengjiquyupaiming.getMenDianNum(this.brandQi)
                    this.$refs.refBottomshifen.getMenDianNum(this.brandQi)
                }
                else{
                    this.brandQiSet = []
                }
            })

            instance.get('/base/outletsLevel/getDashboardLevel',{
                params:{
                    projectId:id
                }
            }).then(res => {
                this.quyuSet = res.data.data
                this.quyuSet.push({outletsName:'总体',id:''})
                this.proDaQu = this.quyuSet[this.quyuSet.length - 1].id

                this.$refs.refFengongsi.getMenDianNum(this.proDaQu)
            })
        }


        const eventSSe = new EventSource('http://43087az00so9.vicp.fun:18072/base/dashboard/sse/connect')
        eventSSe.addEventListener('data',(res) => {
            if(JSON.parse(res.data).length){
                const arr = JSON.parse(res.data)
                if(arr.includes('/base/dashboard/outletCount')){
                    this.$refs.refMendianshuliang.getMenDianNum(this.brandQi)
                }
                if(arr.includes('/base/dashboard/historyComparison')){
                    this.$refs.benqishangqi.getMenDianNum(this.brandQi)
                }
                if(arr.includes('/base/dashboard/areaComparison')){
                    this.$refs.refFengongsi.getMenDianNum(this.proDaQu)
                }
                if(arr.includes('/base/dashboard/province')){
                    this.$refs.refMapCenter.getMenDianNum(this.brandQi)
                }
                if(arr.includes('/base/dashboard/regionComparison')){
                    this.$refs.refCengjiquyupaiming.getMenDianNum(this.brandQi)
                }
                if(arr.includes('/base/dashboard/lossRatio')){
                    this.$refs.refBottomshifen.getMenDianNum(this.brandQi)
                }
            }
        })
    },
    data() {
        return {
            screenOrWh: screenOrWh,
            brandQi:'',
            brandQiSet:[],
            proDaQu:'',
            quyuSet:[]
        }
    },
    methods:{
        changeQiCi(){
            //当换期次在次调用门店数量
            this.$refs.refMendianshuliang.getMenDianNum(this.brandQi)
            this.$refs.benqishangqi.getMenDianNum(this.brandQi)
            this.$refs.refMapCenter.getMenDianNum(this.brandQi)
            this.$refs.refCengjiquyupaiming.getMenDianNum(this.brandQi)
            this.$refs.refBottomshifen.getMenDianNum(this.brandQi)
        },
        changFen(){
            this.$refs.refFengongsi.getMenDianNum(this.proDaQu)
        }
    }
}
</script>

<style scoped lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  background-color: #282c34;
  //  background: url("https://ajreport.beliefteam.cn/file/download/f33c391c-595d-45ec-8d1f-0a194e18b060") no-repeat;
  //  background-size: cover;
}

::v-deep .border-box-content {
  padding: vh(40);
}

.brand-qici-sel{
    overflow: hidden;
    box-sizing: border-box;

    & ::v-deep .el-input__inner{
        background: rgb(37,65,92);
        border: 1px solid rgb(68, 139, 208);
        color: #fff;
    }
}

.main-body-content{
    margin-top: vh(25);
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-start;
    &>div:not(:last-child){
        margin-right: vw(20);
    }
    .content-center{
        flex: 1;
        height: 100%;
    }
    .content-right{
        width: vw(450);
        height: 100%;
    }
}
.content-left{
    width: vw(450);
    height: 100%;
    padding: vh(25) 0 0 0;
    box-sizing: border-box;
    margin-right: vw(20);
}
.bottom-content{
    width: 100%;
    margin-top: vh(20);
    height: vh(300);
}

.left-main-padd-none ::v-deep .border-box-content{
    padding: vw(10) vh(10);
}
</style>
